<template>
  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="姓名" prop="realName">
      <div>{{ form.realName }}</div>
    </el-form-item>
    <el-form-item label="年龄" prop="realName">
      <div>{{ form.age }}</div>
    </el-form-item>
    <el-form-item label="电话" prop="realName">
      <div>{{ form.phone }}</div>
    </el-form-item>
    <el-form-item label="性别" prop="realName">
      <div>{{ form.Sex }}</div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="edit">编辑</el-button>
    </el-form-item></el-form
  >
  <el-dialog
    :model-value="dialogVisible"
    title="添加用户"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" label-width="70px" :rules="rules">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="editform.realName" />
      </el-form-item>
      <el-form-item label="年龄" prop="password">
        <el-input v-model="editform.age" />
      </el-form-item>
      <el-form-item label="电话" prop="password">
        <el-input v-model="editform.phone" />
      </el-form-item>
      <el-form-item label="性别" prop="password">
        <el-input v-model="editform.Sex" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { addsubject } from '@/api/subject'
import { ElMessage } from 'element-plus'
import { mydata, edituser } from '@/api/user'
const form = ref({
  name: '',
  level: '',
  realName: '',
  Sex: ''
})

const editform = ref({
  name: '',
  level: '',
  realName: '',
  Sex: ''
})

const dialogVisible = ref(false)

const init = async () => {
  const res = await mydata()
  form.value = res.data.data
  if (form.value.sex === 1) {
    form.value.Sex = '女'
  } else {
    form.value.Sex = '男'
  }
  console.log(form.value)
}
init()

const edit = () => {
  editform.value = JSON.parse(JSON.stringify(form.value))
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
}
const handleConfirm = async () => {
  dialogVisible.value = false
  await edituser(editform.value)
  ElMessage({
    message: '用户信息修改成功',
    type: 'success'
  })
  init()
}
</script>

<style lang="scss" scoped></style>
